<template>
    <v-stage :config="stageConfig">
      <v-layer>
        <!-- 背景图片 -->
        <v-image :config="imageConfig" />
  
        <!-- 主设备信息 -->
        <v-text :config="mainDeviceConfig" />
        <v-text :config="mainAVoltageConfig" />
        <v-text :config="mainACurrentConfig" />
        <v-text :config="mainAPowerConfig" />
  
        <!-- 分支设备列表 -->
        <template v-for="(branch, index) in filteredBranches" :key="branch.id">
          <!-- 分支设备标题 -->
          <v-text :config="getBranchTitleConfig(index)" />
          <!-- 分支设备数据 -->
          <v-text :config="getBranchAVoltageConfig(index, branch)" />
          <v-text :config="getBranchACurrentConfig(index, branch)" />
          <v-text :config="getBranchAPowerConfig(index, branch)" />
        </template>
      </v-layer>
    </v-stage>
  </template>
  
  <script>
  import { Stage, Layer, Image, Text } from 'vue-konva';
  
  export default {
    components: {
      'v-stage': Stage,
      'v-layer': Layer,
      'v-image': Image,
      'v-text': Text,
    },
    props: {
      deviceData: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        stageConfig: {
          width: 1000,
          height: 800,
        },
        imageConfig: {
          x: 0,
          y: 0,
          width: 1000,
          height: 800,
          image: null,
        },
        // 主设备文本配置
        mainDeviceConfig: {
          x: 20,
          y: 20,
          text: `主设备: ${this.deviceData.deviceName} (${this.deviceData.deviceId})`,
          fontSize: 20,
          fill: "#333",
        },
        mainAVoltageConfig: {
          x: 20,
          y: 50,
          text: `A相电压: ${this.deviceData.avoltage}`,
          fontSize: 16,
          fill: this.getStatusColor("voltage", this.deviceData.avoltage),
        },
        mainACurrentConfig: {
          x: 20,
          y: 80,
          text: `A相电流: ${this.deviceData.acurrent}`,
          fontSize: 16,
          fill: this.getStatusColor("current", this.deviceData.acurrent),
        },
        mainAPowerConfig: {
          x: 20,
          y: 110,
          text: `A相功率: ${this.deviceData.apower}`,
          fontSize: 16,
          fill: this.getStatusColor("power", this.deviceData.apower),
        },
      };
    },
    computed: {
      // 过滤出 A 路分支（根据 network 字段）
      filteredBranches() {
        return this.deviceData.branch.filter(
          (b) => b.network === "A路" || b.deviceId.includes("-A")
        );
      },
    },
    mounted() {
      // 加载背景图
      const image = new window.Image();
      image.src = require("@/assets/two.png"); // 替换为实际图片路径
      image.onload = () => {
        this.imageConfig.image = image;
      };
    },
    methods: {
      // 动态生成分支标题配置
      getBranchTitleConfig(index) {
        return {
          x: 300,
          y: 150 + index * 80,
          text: `分支 ${index + 1}: ${this.filteredBranches[index].deviceName}`,
          fontSize: 16,
          fill: this.filteredBranches[index].status === "在线" ? "green" : "gray",
        };
      },
      // 动态生成分支 A 相电压配置
      getBranchAVoltageConfig(index, branch) {
        return {
          x: 300,
          y: 180 + index * 80,
          text: `电压: ${branch.avoltage}`,
          fontSize: 14,
          fill: this.getStatusColor("voltage", branch.avoltage),
        };
      },
      // 动态生成分支 A 相电流配置
      getBranchACurrentConfig(index, branch) {
        return {
          x: 300,
          y: 200 + index * 80,
          text: `电流: ${branch.acurrent}`,
          fontSize: 14,
          fill: this.getStatusColor("current", branch.acurrent),
        };
      },
      // 动态生成分支 A 相功率配置
      getBranchAPowerConfig(index, branch) {
        return {
          x: 300,
          y: 220 + index * 80,
          text: `功率: ${branch.apower}`,
          fontSize: 14,
          fill: this.getStatusColor("power", branch.apower),
        };
      },
      // 根据数据状态返回颜色
      getStatusColor(type, value) {
        const numericValue = parseFloat(value);
        if (type === "voltage") {
          return numericValue > 230 ? "red" : "green"; // 电压超过 230V 报警
        } else if (type === "current") {
          return numericValue > 1.0 ? "red" : "green"; // 电流超过 1.0A 报警
        } else if (type === "power") {
          return numericValue > 200 ? "orange" : "green"; // 功率超过 200W 警告
        }
        return "black";
      },
    },
  };
  </script>